<template>
	<view class="formCon">
		<u-form :model="form" ref="form" label-width="180">
			<u-form-item label="竞品品牌" prop="brand"><u-input v-model="form.brand"></u-input></u-form-item>
			<u-form-item label="竞品型号" prop="product"><u-input v-model="form.product"></u-input></u-form-item>
			<u-form-item label="竞品售价" prop="price"><u-input v-model="form.price"></u-input></u-form-item>
			<u-form-item label="竞品优势" prop="advantage"><u-input v-model="form.advantage"></u-input></u-form-item>
			<u-form-item label="竞品劣势" prop="disadvantage"><u-input v-model="form.disadvantage"></u-input></u-form-item>
			<u-form-item label="竞品图片" prop="fileList">
				<u-upload
					ref="uUpload"
					:action="'/'"
					width="120"
					height="120"
					max-count="1"
					upload-text=" "
					:file-list="fileList"
					:auto-upload="false"
					@on-list-change="fileListChange"
				></u-upload>
			</u-form-item>
			<u-form-item label="您当地市场主流产品价位段是多少？" label-position="top" prop="priceRange"><u-input v-model="form.priceRange"></u-input></u-form-item>
			<u-form-item label="您销售天能产品遇到的产品问题与市场阻碍有哪些？" label-position="top" prop="marketObstacles"><u-input v-model="form.marketObstacles" type="textarea"></u-input></u-form-item>
		</u-form>
		<view class="bottomOpeCon flex justify-center">
			<view><u-button type="success" size="medium" @click="submitClick">提交</u-button></view>
		</view>
	</view>
</template>

<script>
import baseUrl from '../../config/url.js';
import { saveCompetitiveUrl } from '../../api/feedback.js';
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			form: {
				brand: '',
				product: '',
				price: '',
				advantage: '',
				disadvantage: '',
				priceRange: '',
				marketObstacles: ''
			},
			fileList: [],
			rules: {
				brand: [{ required: true, message: '请输入竞品品牌', trigger: 'blur' }],
				product: [{ required: true, message: '请输入型号', trigger: 'blur' }]
			}
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		...mapActions({
			saveCompetitive: 'feedback/saveCompetitive'
		}),
		fileListChange(e) {
			console.log(e);
			this.fileList = e;
		},
		submitClick() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.$confirm('提示', '确定提交？', () => {
						if (this.fileList.length > 0) {
							uni.uploadFile({
								url: baseUrl + saveCompetitiveUrl,
								filePath: this.fileList[0].url,
								name: 'file',
								formData: {
									...this.form
								},
								success: uploadFileRes => {
									console.log(uploadFileRes.data);
									let res = JSON.parse(uploadFileRes.data);
									if (res && res.code == 0) {
										uni.showModal({
											title: '提示',
											content: '提交成功',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.navigateBack({
														delta: 1
													});
												}
											}
										});
									} else {
										uni.showToast({
											mask: true,
											title: '提交失败',
											icon: 'none'
										});
									}
								},
								fail: err => {
									console.log(err);
									uni.showToast({
										mask: true,
										title: '网络错误',
										icon: 'none'
									});
								}
							});
						} else {
							this.saveCompetitive({
								...this.form
							})
								.then(res => {
									console.log(res);
									if (res && res.code == 0) {
										uni.showModal({
											title: '提示',
											content: '提交成功',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.navigateBack({
														delta: 1
													});
												}
											}
										});
									} else {
										uni.showToast({
											mask: true,
											title: '提交失败',
											icon: 'none'
										});
									}
								})
								.catch(err => {
									console.log(err);
								});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
@import './styles/formPage.less';
</style>
